<template>
    <div class="user-fixed-head" :active="fixedHead">
        <div class="user-fixed-head-background" :scrolling="scrolling"></div>
        <div class="user-fixed-head-title">
            <slot />
            <span v-text="title"></span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: { type: String },
        top: { type: Number, default: 84 },
    },
    data () {
        return {
            fixedHead: false,
            fixedForm: false,
            scrolling: false,
        };
    },

    methods: {
        checkHeaderActive () {
            const scrollY = document.documentElement.scrollTop || document.body.scrollTop

            this.fixedHead = scrollY >= this.top
            // this.fixedForm = scrollY >= 128
            this.scrolling && clearTimeout(this.scrolling);
            this.scrolling = setTimeout(() => this.scrolling = false, 1000);
        },
    },
    created () {
        this.$on('global:onscroll', this.checkHeaderActive)
    },
    mounted () {
        this.checkHeaderActive();
        window.addEventListener('scroll', this.checkHeaderActive)
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.checkHeaderActive)
    }

};
</script>

<style scoped lang="scss">
.user-fixed-head {
    .user-fixed-head-background {
        position: fixed;
        left: 228px;
        right: 0;
        top: 0;
        background-color: #fff;
        opacity: 0;
        z-index: 2;
        height: 60px;
        transition: all 0.5s;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            background-color: #ebebeb;
        }
    }

    .user-fixed-head-title {
        position: fixed;
        left: 228px;
        right: 0;
        top: -10px;
        opacity: 0;
        z-index: 11;
        height: 60px;
        padding: 0 24px;
        transition: all 0.5s;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
        display: flex;
        align-items: center;
        pointer-events: none;
    }

    &[active] {
        .user-fixed-head-background,
        .user-fixed-head-title {
            opacity: 1;
            top: 0;
            & > * {
                pointer-events: all;
            }
        }

        .user-fixed-head-background[scrolling] {
            box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
        }
    }
}
</style>
